<template>
	<transition name="down">
		<div
			v-show="isVisble"
			class="min-w-[420px] fixed top-[20px] left-[50%] translate-x-[-50%] z-50 flex items-center px-3 py-1.5 rounded-sm border cursor-pointer"
			:class="styles[type].containerClass"
		>
			<m-svg-icon
				:name="styles[type].icon"
				:fillClass="styles[type].fillClass"
				class="h-1.5 w-1.5 mr-1.5"
			></m-svg-icon>
			<span class="text-sm" :class="styles[type].textClass">{{ content }}</span>
		</div>
	</transition>
</template>

<script>
const typeEnum = ['success', 'warn', 'error']
</script>

<script setup>
import { ref, onMounted } from 'vue'
import mSvgIcon from '../svg-icon/index.vue'

const props = defineProps({
	type: {
		type: String,
		default: 'success',
		validator: (val) => typeEnum.includes(val),
	},
	content: String,
	duration: Number,
	destory: Function,
})

const styles = {
	warn: {
		icon: 'warn',
		fillClass: 'fill-warn-300',
		textClass: 'text-warn-300',
		containerClass:
			'bg-warn-100 border-warn-200 hover:shadow-lg hover:shadow-warn-100',
	},
	success: {
		icon: 'success',
		fillClass: 'fill-success-300',
		textClass: 'text-success-300',
		containerClass:
			'bg-success-100 border-success-200 hover:shadow-lg hover:shadow-success-100',
	},
	error: {
		icon: 'error',
		fillClass: 'fill-error-300',
		textClass: 'text-error-300',
		containerClass:
			'bg-error-100 border-error-200 hover:shadow-lg hover:shadow-error-100',
	},
}

const isVisble = ref(false)
onMounted(() => {
	isVisble.value = true
	setTimeout(() => {
		isVisble.value = false
		props.destory()
	}, props.duration || 2000)
})
</script>

<style scoped lang="scss">
.down-enter-active,
.down-leave-active {
	transition: all 0.5s;
}

.down-enter-from,
.down-leave-to {
	opacity: 0;
	transform: translate(-50%, -100px);
}
</style>
